<#include "../common/layout/__mainlayout.html">
<#include "../common/__pagination.html">

<#assign pageBreadCrumbs>
    <li class="active"><a href="#">用户权限</a></li>
    <li class="active">角色管理</li>
</#assign>

<#assign pageCss>
    <link rel="stylesheet" href="${contextPath}/static/admin/assets/css/zTreeStyle/zTreeStyle.css" type="text/css">
</#assign>

<#assign pageJavascript>
    <script src="${contextPath}/static/admin/assets/js/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('[data-rel=tooltip]').tooltip();

            if(!ace.vars['touch']) {
                $('.chosen-select').chosen({allow_single_deselect:true});
            }

            // 清除远程modal数据
            $("#editModal").on("hidden.bs.modal", function(){
                $(this).removeData("bs.modal");
            });

            // 删除按钮
            $("a.delete").on(ace.click_event, function(e){
                var currentA = this;
                e.preventDefault();
//                bootbox.setDefaults({locale:"zh_CN"});
                bootbox.confirm({
                            message: "确定删除该角色?",
                            buttons: {
                                confirm: {
                                    label: "确定",
                                    className: "btn-primary btn-sm"
                                },
                                cancel: {
                                    label: "取消",
                                    className: "btn-sm"
                                }
                            },
                            callback: function(result) {
                                if(result) window.location.href = $(currentA).attr("href");
                            }
                        }
                );
            });

            // 权限树
            var setting = {
                view: {
                    dblClickExpand: true,
                    showIcon: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                check:{
                    enable: true,
                    chkStyle: "checkbox",
                    chkboxType: { "Y": "", "N": "" },
                    autoCheckTrigger: true
                },
                callback:{
                    onCheck: onCheckHandler
                }
            }

            $("a.resc").click(function(){
                $.post("${contextPath}/admin/role/getRescTree?role.id="+$(this).attr("data"), function(data){
                    $.fn.zTree.init($("#rescTree"), setting, JSON.parse(data));
                });
            });
        });
        //权限树 相关事件
        function onCheckHandler(event, treeId, treeNode){
            if(treeNode.checked){
                // 增加权限
                $.post("${contextPath}/admin/role/addResc",{"roleResc.role_id": treeNode.roleId, "roleResc.resc_id":treeNode.id});
            }
            else{
                // 移除权限
                $.post("${contextPath}/admin/role/deleteResc",{"roleResc.role_id": treeNode.roleId, "roleResc.resc_id":treeNode.id});
            }
        }

        function page(pageNum) {
            $("#page").val(pageNum);
            $("#searchForm").submit();
        }
    </script>
</#assign>

<@mainlayout pageBreadCrumbs=pageBreadCrumbs pageCss=pageCss pageJavascript=pageJavascript currentMenu="userRoleFlag-roleFlag">
    <div class="row">
        <div class="col-xs-12 col-sm-8">
            <div class="widget-box widget-color-orange">
                <div class="widget-header widget-header-small">
                    <h5 class="widget-title lighter">角色列表</h5>
                    <div class="widget-toolbar">
                        <a href="${contextPath}/admin/role/view" data-rel="tooltip" title="添加" data-toggle="modal" data-target="#editModal"> <i class="ace-icon fa fa-plus-circle green"></i></a>
                        <a href="#" data-action="collapse"> <i class="ace-icon fa fa-chevron-up"></i></a>
                    </div>
                </div>

                <div class="widget-body">
                    <div class="widget-main no-padding">
                        <table id="contentTable" class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th width="60">角色ID</th>
                                <th width="100">名称</th>
                                <th width="80">更新时间</th>
                                <th width="40">排序</th>
                                <th width="100">备注</th>
                                <th width="40">状态</th>
                                <th width="60">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <#list roleList as role>
                                <tr>
                                    <td>${role.id!}</td>
                                    <td>${role.name!}</td>
                                    <td>${role.update_time?string("yyyy-MM-dd HH:mm:ss")!}</td>
                                    <td>${role.sort!}</td>
                                    <td>${role.remark!}</td>
                                    <td><#if role.enable == '0'> <div>启用</div> <#else> <div style="color:red">停用</div></#if></td>
                                    <td>
                                        <div class="hidden-sm hidden-xs action-buttons">
                                            <a class="green tooltip-success edit" href="${contextPath}/admin/role/view?id=${role.id!}" data-rel="tooltip" title="编辑" data-toggle="modal" data-target="#editModal"><i class="ace-icon fa fa-pencil bigger-130"></i></a>
                                            <a class="orange tooltip-warning resc" href="#" data-rel="tooltip" title="权限" data="${role.id!}"><i class="ace-icon fa fa-key bigger-130"></i></a>
                                            <a class="red tooltip-error delete" href="${contextPath}/admin/role/delete?ids=${role.id!}" data-rel="tooltip" title="删除"> <i class="ace-icon fa fa-trash-o bigger-130"></i></a>
                                        </div>

                                        <div class="hidden-md hidden-lg">
                                            <div class="inline position-relative">
                                                <button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown" data-position="auto">
                                                    <i class="ace-icon fa fa-caret-down icon-only bigger-120"></i>
                                                </button>

                                                <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                                    <li><a href="${contextPath}/admin/role/view?id=${role.id!}" class="tooltip-success edit" data-rel="tooltip" title="编辑" data-toggle="modal" data-target="#editModal"> <span class="green"><i class="ace-icon fa fa-pencil-square-o bigger-120"></i></span></a></li>
                                                    <li><a href="#" class="tooltip-warning resc" data-rel="tooltip" title="权限" data="${role.id!}"> <span class="orange"><i class="ace-icon fa fa-key bigger-120"></i></span></a></li>
                                                    <li><a href="${contextPath}/admin/role/delete?ids=${role.id!}" class="tooltip-error delete" data-rel="tooltip" title="删除"> <span class="red"><i class="ace-icon fa fa-trash-o bigger-120"></i></span></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </#list>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xs-6 col-sm-4">
            <div class="widget-box widget-color-blue2">
                <div class="widget-header widget-header-small">
                    <h4 class="widget-title lighter smaller">角色权限</h4>
                </div>

                <div class="widget-body">
                    <div class="widget-main padding-8">
                        <ul id="rescTree" class="ztree"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--编辑对话框-->
    <div id="editModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
            </div>
        </div>
    </div>
</@mainlayout>